import { Component, Index } from 'solid-js'
import { useGame } from './game'
import S from './Record.module.styl'
import Versus from './Versus'

const resultMap = {
  0: '游戏仍在继续',
  1: '结束，我方胜利',
  '-1': '结束，对方胜利',
}

const Record: Component = () => {
  const { store } = useGame()
  return <>
    <div class={S.line}>游戏开始</div>
    <Index each={store.record}>{line =>
      <Versus left={line()[0]} right={line()[1]} classList={{ [S.line]: true }}></Versus>
    }</Index>
    <div class={S.line}>{resultMap[store.result]}</div>
  </>
}

export default Record
